﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Javascript-Asynchrone.aspx.cs" Inherits="mal.balades.Web.Sample.Javascript_Asynchrone" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    
    <style>
        body,table
        {
        	font-family:Arial;
            font-size:14px;
        }
        h2
        {
        	margin:0px;
        	font-size:14px;        	
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="/scripts/jquery.tmpl.js"></script>
    <script src="/scripts/knockout-1.2.0.js"></script>
    <script src="viewmodel.js"></script>
    <script>
        var scrollTimer;

        $(document).ready(function () {
            ko.applyBindings(viewModel);

            viewModel.visits([]);
            for (var i = 0; i < 30; i++) {
                viewModel.visits.push(visitViewModel());
            }
            viewModel.numberOfRows(30);
            viewModel.buildPages();

        });       

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="/Services/VisitServices.svc" />
        </Services>
    </asp:ScriptManager>
    <button data-bind="click: function(){viewModel.loadPage(0);}">
        Load</button>
    <br />
    <span data-bind="visible:isLoading">Loading</span>
    <div id="container" >
        <table border="0" id="innerContainer" data-bind="visible:isLoaded">
            <tbody data-bind="template: {name:'visitsTemplate', foreach:visits}">
            </tbody>
        </table>
    </div>
    <script id="visitsTemplate" type="text/html">    
        <tr valign="top" height="80" data-bind="visible:isLoaded">
            <td>
                <img data-bind="attr: { src: Picture}" height="70px"  />
            </td>
            <td>
            <h2>
                <a data-bind="text: Title, attr: { href: Url}" target="_blank" />
                <span style="font-size:12px">
                </span>
                </h2>
                      
                <span data-bind="text: SumUp" /> 
            </td>                   
        </tr>

        <tr valign="top" height="80" data-bind="visible:isLoaded()==false">
            <td colspan="2">
                Loading...
            </td>
    </script>    
    </form>
</body>
</html>
